<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Pannonia - premium responsive admin template by Eugene Kopyov</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet" type="text/css" /><![endif]-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&amp;sensor=false"></script>

<script type="text/javascript" src="js/plugins/charts/jquery.sparkline.min.js"></script>

<script type="text/javascript" src="js/plugins/ui/jquery.easytabs.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.collapsible.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/plugins/ui/prettify.js"></script>

<script type="text/javascript" src="js/plugins/forms/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.tagsinput.min.js"></script>

<script type="text/javascript" src="js/files/bootstrap.min.js"></script>

<script type="text/javascript" src="js/functions/typography.js"></script>

</head>

<body>

	<!-- Fixed top -->
	<div id="top">
		<div class="fixed">
			<a href="index-2.html" title="" class="logo"><img src="img/logo.png" alt="" /></a>
			<ul class="top-menu">
				<li><a class="fullview"></a></li>
				<li><a class="showmenu"></a></li>
				<li><a href="#" title="" class="messages"><i class="new-message"></i></a></li>
				<li class="dropdown">
					<a class="user-menu" data-toggle="dropdown"><img src="img/userpic.png" alt="" /><span>Howdy, Eugene! <b class="caret"></b></span></a>
					<ul class="dropdown-menu">
						<li><a href="#" title=""><i class="icon-user"></i>Profile</a></li>
						<li><a href="#" title=""><i class="icon-inbox"></i>Messages<span class="badge badge-info">9</span></a></li>
						<li><a href="#" title=""><i class="icon-cog"></i>Settings</a></li>
						<li><a href="#" title=""><i class="icon-remove"></i>Logout</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<!-- /fixed top -->


	<!-- Content container -->
	<div id="container">

		<!-- Sidebar -->
		<div id="sidebar">

			<div class="sidebar-tabs">
		        <ul class="tabs-nav two-items">
		            <li><a href="#general" title=""><i class="icon-reorder"></i></a></li>
		            <li><a href="#stuff" title=""><i class="icon-cogs"></i></a></li>
		        </ul>

		        <div id="general">

			        <!-- Sidebar user -->
			        <div class="sidebar-user widget">
						<div class="navbar"><div class="navbar-inner"><h6>Wazzup, Eugene!</h6></div></div>
			            <a href="#" title="" class="user"><img src="img/demo/sidebar_user_big.png" alt="" /></a>
			            <ul class="user-links">
			            	<li><a href="#" title="">New users<strong>+12</strong></a></li>
			            	<li><a href="#" title="">New orders<strong>+156</strong></a></li>
			            	<li><a href="#" title="">New messages<strong>+45</strong></a></li>
			            </ul>
			        </div>
			        <!-- /sidebar user -->

			        <div class="general-stats widget">
				        <ul class="head">
				        	<li><span>Users</span></li>
				        	<li><span>Orders</span></li>
				        	<li><span>Visits</span></li>
				        </ul>
				        <ul class="body">
				        	<li><strong>116k+</strong></li>
				        	<li><strong>1290</strong></li>
				        	<li><strong>554</strong></li>
				        </ul>
				    </div>

				    <!-- Main navigation -->
			        <ul class="navigation widget">
			            <li><a href="index-2.html" title=""><i class="icon-home"></i>Dashboard</a></li>
			            <li><a href="#" title="" class="expand"><i class="icon-reorder"></i>Form elements<strong>3</strong></a>
			                <ul>
			                    <li><a href="forms.html" title="">Form components</a></li>
			                    <li><a href="wysiwyg.html" title="">WYSIWYG editor</a></li>
			                    <li><a href="form_wizards.html" title="">Wizards</a></li>
			                </ul>
			            </li>
			            <li><a href="#" title="" class="expand"><i class="icon-tasks"></i>Components<strong>4</strong></a>
			                <ul>
			                    <li><a href="components.html" title="">Content components</a></li>
			                    <li><a href="content_grid.html" title="">Content grid</a></li>
			                    <li><a href="blank.html" title="">Blank page</a></li>
			                </ul>
			            </li>
			            <li><a href="media.html" title=""><i class="icon-picture"></i>Media</a></li>
			            <li><a href="icons.html" title=""><i class="icon-th"></i>Icons</a></li>
			            <li><a href="charts.html" title=""><i class="icon-signal"></i>Charts &amp; graphs</a></li>
			            <li><a href="invoice.html" title=""><i class="icon-copy"></i>Invoice</a></li>
			            <li><a href="tables.html" title=""><i class="icon-table"></i>Tables</a></li>
			            <li><a href="#" title="" class="expand"><i class="icon-warning-sign"></i>Error pages<strong>6</strong></a>
			                <ul>
			                    <li><a href="403.html" title="">403 page</a></li>
			                    <li><a href="404.html" title="">404 page</a></li>
			                    <li><a href="405.html" title="">405 page</a></li>
			                    <li><a href="500.html" title="">500 page</a></li>
			                    <li><a href="503.html" title="">503 page</a></li>
			                    <li><a href="offline.html" title="">Offline page</a></li>
			                </ul>
			            </li>
			            <li class="active"><a href="typography.html" title=""><i class="icon-text-height"></i>Typography</a></li>
			            <li><a href="calendar.html" title=""><i class="icon-calendar"></i>Calendar</a></li>
			            <li><a href="file_management.html" title=""><i class="icon-cogs"></i>File management</a></li>
	                    <li><a href="#" title="" class="expand"><i class="icon-indent-right"></i>Menu levels<strong>3</strong></a>
			                <ul>
			                    <li><a href="#" title="">Link</a></li>
			                    <li><a href="#" title="" class="expand">Link with submenu</a>
					                <ul>
					                    <li><a href="#" title="">Lorem ipsum</a></li>
					                    <li><a href="#" title="">Dolor sit amet</a></li>
					                </ul>
			                    </li>
			                    <li><a href="#" title="">Link</a></li>
			                </ul>
	                    </li>
			            <li><a href="#" title="" class="expand"><i class="icon-sitemap"></i>Page layouts<strong>3</strong></a>
			                <ul>
			                    <li><a href="no_sidebar_tabs.html" title="">No sidebar tabs</a></li>
			                    <li><a href="no_action_tabs.html" title="">No action tabs</a></li>
			                    <li><a href="actions_on_top.html" title="">Action tabs on top</a></li>
			                    <li><a href="no_breadcrumbs.html" title="">No breadcrumbs line</a></li>
			                </ul>
			            </li>
			        </ul>
			        <!-- /main navigation -->

		        </div>

		        <div id="stuff">

			        <!-- Social stats -->
			        <div class="widget">
			        	<h6 class="widget-name"><i class="icon-twitter"></i>Social statistics</h6>
			        	<ul class="social-stats">
			        		<li>
			        			<a href="#" title="" class="orange-square"><i class="icon-rss"></i></a>
			        			<div>
				        			<h4>1,286</h4>
				        			<span>total feed subscribers</span>
				        		</div>
			        		</li>
			        		<li>
			        			<a href="#" title="" class="blue-square"><i class="icon-twitter"></i></a>
			        			<div>
				        			<h4>12,683</h4>
				        			<span>total twitter followers</span>
				        		</div>
			        		</li>
			        		<li>
			        			<a href="#" title="" class="dark-blue-square"><i class="icon-facebook"></i></a>
			        			<div>
				        			<h4>530,893</h4>
				        			<span>total facebook likes</span>
				        		</div>
			        		</li>
			        	</ul>
			        </div>
			        <!-- /social stats -->


			        <!-- Categories -->
			        <div class="widget">
			        	<h6 class="widget-name"><i class="icon-list"></i>Categories</h6>
				        <ul class="plus-list categories">
				        	<li>
				        		<a href="#" title="">Company documents</a>
				        		<strong>1232</strong>
				        	</li>
				        	<li>
				        		<a href="#" title="">Media entries</a>
				        		<strong>7638</strong>
				        	</li>
				        	<li>
				        		<a href="#" title="">Blog posts</a>
				        		<strong>221</strong>
				        	</li>
				        	<li>
				        		<a href="#" title="">Job positions</a>
				        		<strong>49</strong>
				        	</li>
				        	<li>
				        		<a href="#" title="">Team members</a>
				        		<strong>80</strong>
				        	</li>
				        	<li>
				        		<a href="#" title="">Projects</a>
				        		<strong>43</strong>
				        	</li>
				        </ul>
				    </div>
				    <!-- /categories -->


				    <!-- Gallery thumbs -->
				    <div class="widget">
				    	<h6 class="widget-name"><i class="icon-picture"></i>Gallery thumbs</h6>
				    	<div class="row-fluid thumbs">
					    	<div class="span6">
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="img/demo/media/1.png" alt="" /></a>
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="img/demo/media/2.png" alt="" /></a>
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="img/demo/media/3.png" alt="" /></a>
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="img/demo/media/4.png" alt="" /></a>
					    	</div>
					    	<div class="span6">
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="img/demo/media/5.png" alt="" /></a>
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="img/demo/media/6.png" alt="" /></a>
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="img/demo/media/7.png" alt="" /></a>
					    		<a href="img/demo/big.jpg" class="lightbox"><img src="img/demo/media/8.png" alt="" /></a>
					    	</div>
					    </div>
				    </div>
				    <!-- /gallery thumbs -->

		        	<!-- Action buttons -->
	                <div class="widget">
	                	<h6 class="widget-name"><i class="icon-search"></i>Action buttons</h6>
	                	<button class="btn btn-block btn-danger">Action button</button>
	                	<button class="btn btn-block btn-info">Action button</button>
	                	<button class="btn btn-block btn-success">Action button</button>
	                </div>
	                <!-- /action buttons -->

			        <!-- Tags input -->
					<div class="widget">
						<h6 class="widget-name"><i class="icon-search"></i>Tags input</h6>
						<input type="text" id="tags1" class="tags" value="these,are,sample,tags" />
					</div>
					<!-- /tags input -->

		        </div>

		    </div>
		</div>
		<!-- /sidebar -->


		<!-- Content -->
		<div id="content">

		    <!-- Content wrapper -->
		    <div class="wrapper">

			    <!-- Breadcrumbs line -->
			    <div class="crumbs">
		            <ul id="breadcrumbs" class="breadcrumb"> 
		                <li><a href="index-2.html">Dashboard</a></li>
		                <li class="active"><a href="typography.html" title="">Typography</a></li>
		            </ul>
			        
		            <ul class="alt-buttons">
		                <li><a href="#" title=""><i class="icon-signal"></i><span>Stats</span></a></li>
		                <li><a href="#" title=""><i class="icon-comments"></i><span>Messages</span></a></li>
		                <li class="dropdown"><a href="#" title="" data-toggle="dropdown"><i class="icon-tasks"></i><span>Tasks</span> <strong>(+16)</strong></a>
		                	<ul class="dropdown-menu pull-right">
		                        <li><a href="#" title=""><i class="icon-plus"></i>Add new task</a></li>
		                        <li><a href="#" title=""><i class="icon-reorder"></i>Statement</a></li>
		                        <li><a href="#" title=""><i class="icon-cog"></i>Settings</a></li>
		                	</ul>
		                </li>
		            </ul>
			    </div>
			    <!-- /breadcrumbs line -->

			    <!-- Page header -->
			    <div class="page-header">
			    	<div class="page-title">
				    	<h5>Template typography</h5>
				    	<span>Lists, font styles, headings etc.</span>
			    	</div>

			    	<ul class="page-stats">
			    		<li>
			    			<div class="showcase">
			    				<span>New visits</span>
			    				<h2>22.504</h2>
			    			</div>
			    			<div id="total-visits" class="chart">10,14,8,45,23,41,22,31,19,12, 28, 21, 24, 20</div>
			    		</li>
			    		<li>
			    			<div class="showcase">
			    				<span>My balance</span>
			    				<h2>$16.290</h2>
			    			</div>
			    			<div id="balance" class="chart">10,14,8,45,23,41,22,31,19,12, 28, 21, 24, 20</div>
			    		</li>
			    	</ul>
			    </div>
			    <!-- /page header -->

			    <!-- Action tabs -->
			    <div class="actions-wrapper">
				    <div class="actions">

				    	<div id="user-stats">
					        <ul class="round-buttons">
					            <li><div class="depth"><a href="#" title="Add new post" class="tip"><i class="icon-plus"></i></a></div></li>
					            <li><div class="depth"><a href="#" title="View statement" class="tip"><i class="icon-signal"></i></a></div></li>
					            <li><div class="depth"><a href="#" title="Media posts" class="tip"><i class="icon-reorder"></i></a></div></li>
					            <li><div class="depth"><a href="#" title="RSS feed" class="tip"><i class="icon-rss"></i></a></div></li>
					            <li><div class="depth"><a href="#" title="Create new task" class="tip"><i class="icon-tasks"></i></a></div></li>
					            <li><div class="depth"><a href="#" title="Layout settings" class="tip"><i class="icon-cogs"></i></a></div></li>
					        </ul>
				    	</div>

				    	<div id="quick-actions">
				    		<ul class="statistics">
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="blue-square"><i class="icon-plus"></i></a>
					    				<strong>12,476</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 60%;"></div></div>
									<span>User registrations</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="red-square"><i class="icon-hand-up"></i></a>
					    				<strong>621,873</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 20%;"></div></div>
									<span>Total clicks</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="purple-square"><i class="icon-shopping-cart"></i></a>
					    				<strong>562</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 90%;"></div></div>
									<span>New orders</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="green-square"><i class="icon-ok"></i></a>
					    				<strong>$45,360</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 70%;"></div></div>
									<span>General balance</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="sea-square"><i class="icon-group"></i></a>
					    				<strong>562K+</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 50%;"></div></div>
									<span>Total users</span>
				    			</li>
				    			<li>
				    				<div class="top-info">
					    				<a href="#" title="" class="dark-blue-square"><i class="icon-facebook"></i></a>
					    				<strong>36,290</strong>
					    			</div>
									<div class="progress progress-micro"><div class="bar" style="width: 93%;"></div></div>
									<span>Facebook fans</span>
				    			</li>
				    		</ul>
				    	</div>

				    	<div id="map">
				    		<div id="google-map"></div>
				    	</div>

				    	<ul class="action-tabs">
				    		<li><a href="#user-stats" title="">Quick actions</a></li>
				    		<li><a href="#quick-actions" title="">Website statistics</a></li>
				    		<li><a href="#map" title="" id="map-link">Google map</a></li>
				    	</ul>
				    </div>
				</div>
			    <!-- /action tabs -->

		    	<!-- Search widget -->
		    	<form class="search widget" action="#">
		    		<div class="autocomplete-append">
			    		<ul class="search-options">
			    			<li><a href="#" title="Go to search page" class="go-option tip"></a></li>
			    			<li><a href="#" title="Advanced search" class="advanced-option tip"></a></li>
			    			<li><a href="#" title="Settings" class="settings-option tip"></a></li>
			    		</ul>
			    		<input type="text" placeholder="search website..." id="autocomplete" />
			    		<input type="submit" class="btn btn-info" value="Search" />
			    	</div>
		    	</form>
		    	<!-- /search widget -->


		    	<h5 class="widget-name"><i class="icon-text-height"></i>Headings</h5>

		    	<!-- Headings -->
            	<div class="row-fluid">
                
                	<!-- Column -->
                	<div class="span6">
                    
                        <!-- Headings, standard font -->
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Headings. Standard font</h6></div></div>
                            <div class="well body">

                                <h1 style="margin-top: 0;">H1 Tag Header <small>heading note</small></h1><p>Vivamus non <a href="#" title="">massa eu massa</a> ornare vulputate id ac velit. <strong>Pellentesque nunc nulla</strong>, faucibus at pretium eu, fringilla ut dui. </p>
                                <h2>H2 Tag Header <small>heading note</small></h2><p>Mauris <span class="text-error">luctus nisi</span> sed erat pharetra nec hendrerit mi sagittis. <span class="text-info">Pellentesque</span> nulla erat, varius nec sagittis a, pretium et est. </p>
                                <h3>H3 Tag Header <small>heading note</small></h3><p>Pellentesque habitant <s>morbi tristique</s> senectus et netus et malesuada <span class="text-warning">fames ac turpis</span> egestas. Phasellus a lacus massa</p>
                                <h4>H4 Tag Header <small>heading note</small></h4><p>Cras nec nunc sit amet mi <span class="text-success">dictum sagittis</span> id vitae est. Aliquam id dolor non metus aliquam faucibus nec pretium mi <span class="text-muted">vestibulum</span> </p>
                                <h5>H5 Tag Header <small>heading note</small></h5><p>Praesent nec leo arcu. Nulla facilisi. Aenean neque arcu, laoreet <i>in bibendum sed</i>, tincidunt consectetur dolor. </p>
                                <h6>H6 Tag Header <small>heading note</small></h6><p>Integer dui felis, <em><strong>varius quis vulputate</strong></em> egestas, suscipit ac nisi. <u>Vestibulum sed odio</u> lectus, a dictum enim</p>

                            </div>
                        </div>
                        <!-- /headings, standard font -->

                    </div>
                    <!-- /column -->
                    
                    <!-- Column -->
                    <div class="span6">

                        <!-- Headings, Open Sans -->
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Headings. Open Sans</h6></div></div>
                            <div class="well body">

                                    <h1 style="margin-top: 0;" class="sans">H1 Tag Header <small>heading note</small></h1><p>Vivamus non <a href="#" title="">massa eu massa</a> ornare vulputate id ac velit. <strong>Pellentesque nunc nulla</strong>, faucibus at pretium eu, fringilla ut dui. </p>
                                    <h2 class="sans">H2 Tag Header <small>heading note</small></h2><p>Mauris <span class="text-error">luctus nisi</span> sed erat pharetra nec hendrerit mi sagittis. <span class="text-info">Pellentesque</span> nulla erat, varius nec sagittis a, pretium et est. </p>
                                    <h3 class="sans">H3 Tag Header <small>heading note</small></h3><p>Pellentesque habitant <s>morbi tristique</s> senectus et netus et malesuada <span class="text-warning">fames ac turpis</span> egestas. Phasellus a lacus massa</p>
                                    <h4 class="sans">H4 Tag Header <small>heading note</small></h4><p>Cras nec nunc sit amet mi <span class="text-success">dictum sagittis</span> id vitae est. Aliquam id dolor non metus aliquam faucibus nec pretium mi <span class="text-muted">vestibulum</span> </p>
                                    <h5 class="sans">H5 Tag Header <small>heading note</small></h5><p>Praesent nec leo arcu. Nulla facilisi. Aenean neque arcu, laoreet <i>in bibendum sed</i>, tincidunt consectetur dolor. </p>
                                    <h6 class="sans">H6 Tag Header <small>heading note</small></h6><p>Integer dui felis, <em><strong>varius quis vulputate</strong></em> egestas, suscipit ac nisi. <u>Vestibulum sed odio</u> lectus, a dictum enim</p>
                                
                            </div>                     
                        </div>
                        <!-- /headings, Open Sans -->
                        
                    </div>
                    <!-- /column -->
                    
                </div>
                <!-- /headings -->


                <h5 class="widget-name"><i class="icon-strikethrough"></i>Text styles</h5>

                <!-- Text styles -->
                <div class="row-fluid">

                	<!-- Column -->
                	<div class="span6">

                    	<!-- Text styles -->
                    	<div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Text styles</h6></div></div>
                            <div class="well body">
                            	<strong class="subtitle">Emphasys styles:</strong>
                                <div class="well-white body">
                                    <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
                                    <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
                                    <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
                                    <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
                                    <span class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</span>
                                </div>
                                
                                <div class="semi-widget">         
                                    <strong class="subtitle">Blockquotes:</strong>
                                    <div class="well-white body">
                                        <blockquote>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                        </blockquote>
                                    </div>
                                </div>
                                
                                <div class="well-white body semi-widget">
                                    <blockquote>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                        <small>Someone famous <cite title="Source Title">Source Title</cite></small>
                                    </blockquote>
                                </div>
                                
                                <div class="well-white body semi-widget">
                                    <blockquote class="pull-right">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                        <small>Someone famous <cite title="Source Title">Source Title</cite></small>
                                    </blockquote>
                                    <div class="clearfix"></div>
                                </div>
                                
                            </div>
                        </div>
                        <!-- /text styles -->

                	</div>
                	<!-- /column -->

                	<!-- Column -->
                	<div class="span6">

                        <!-- Pre, code -->
                        <div class="widget">
                            <div class="navbar"><div class="navbar-inner"><h6>Pre, code styles</h6></div></div>
                            <div class="well body">

                                <div class="semi-widget">
                                    <strong class="subtitle">Pre:</strong>
<pre class="pre-scrollable prettyprint linenums">
&lt;dl class="dl-horizontal"&gt;
  &lt;div class="well-white">
    &lt;blockquote>
      &lt;p>Lorem ipsum.&lt;/p>
      &lt;small>Someone famous&lt;/small>
    &lt;/blockquote>
  &lt;/div>
&lt;/div>

&lt;div class="well-white body semi-block">
  &lt;blockquote class="pull-right">
    &lt;p>Lorem ipsum.&lt;/p>
    &lt;small>Someone famous&lt;/small>
  &lt;/blockquote>
&lt;/div>
</pre>         
                                </div>

                                <div class="semi-widget">
                                	<strong class="subtitle">Code:</strong>
                                    <div class="well-white body">
                                    	<code>&lt;h5 class="subtitle semi-block">Pre and code:&lt;/h5></code>
                                    </div>
                                </div>

                            </div>
                        </div>                                
                        <!-- /pre, code -->

                	</div>
                	<!-- /column -->

                </div>
                <!-- /text styles -->


                <h5 class="widget-name"><i class="icon-list"></i>List styles</h5>

                <!-- List styles -->
                <div class="widget">
                	<div class="navbar"><div class="navbar-inner"><h6>List styles</h6></div></div>
                    <div class="well body">
                        
                        <!-- Lists -->
                    	<div class="row-fluid">
                        
                        	<!-- Column -->
                        	<div class="span3">

                        		<div class="widget">
                            
	                            	<!-- Unordered list -->
	                            	<strong class="subtitle">Unordered list</strong>
	                                <div class="well-white body">
	                                    <div class="list">
	                                        <ul>
	                                            <li>Lorem ipsum dolor sit amet</li>
	                                            <li>Nulla volutpat aliquam velit
	                                                <ul>
	                                                    <li>Phasellus iaculis neque</li>
	                                                    <li>Purus sodales ultricies</li>
	                                                </ul>
	                                            </li>
	                                            <li>Faucibus porta lacus fringilla vel</li>
	                                        </ul>
	                                    </div>
	                                </div>
	                                <!-- /unordered list -->
	                                
	                                <!-- Small arrow -->
	                                <div class="semi-widget">
	                                	<strong class="subtitle">Small arrow</strong>
	                                    <div class="well-white body">
	                                        <ul class="arrow-list">
	                                            <li>Nulla volutpat aliquam velit
	                                                <ul>
	                                                    <li>Phasellus iaculis neque</li>
	                                                    <li>Purus sodales ultricies</li>
	                                                </ul>
	                                            </li>
	                                            <li>Faucibus porta lacus fringilla vel</li>
	                                        </ul>
	                                    </div>
	                                </div>
	                                <!-- /small arrow -->

	                            </div>
                                
                            </div>
                            <!-- /column -->
                            
                            <!-- Column -->
                            <div class="span3">

                            	<div class="widget">
                            
	                            	<!-- Ordered list -->
	                                <div class="semi-widget">
	                                	<strong class="subtitle">Ordered list</strong>
	                                    <div class="well-white body">
	                                    	<div class="list">
	                                            <ol>
	                                                <li>Lorem ipsum dolor sit amet</li>
	                                                <li>Consectetur adipiscing elit</li>
	                                                <li>Integer molestie lorem at massa</li>
	                                                <li>Facilisis in pretium nisl aliquet</li>
	                                                <li>Nulla volutpat aliquam velit</li>
	                                            </ol>
	                                        </div>
	                                    </div>
	                                </div>
	                                <!-- /ordered-list -->
	                                
	                                <!-- With minus -->
	                                <div class="semi-widget">
	                                	<strong class="subtitle">With minus</strong>
	                                    <div class="well-white body">
	                                        <ul class="minus-list">
	                                            <li>Nulla volutpat aliquam velit
	                                                <ul>
	                                                    <li>Phasellus iaculis neque</li>
	                                                    <li>Purus sodales ultricies</li>
	                                                </ul>
	                                            </li>
	                                            <li>Faucibus porta lacus fringilla vel</li>
	                                        </ul>
	                                    </div>
	                                </div>
	                                <!-- /with minus -->

	                            </div>
                                
                            </div>
                            <!-- /column -->
                            
                            <!-- Column -->
                            <div class="span3">

                            	<div class="widget">
                            
	                            	<!-- Font icons -->
	                                <div class="semi-widget">
	                                	<strong class="subtitle">Font icons</strong>
	                                    <div class="well-white body">
	                                        <ul class="list-font">
	                                            <li><i class="icon-heart"></i>Lorem ipsum dolor sit amet</li>
	                                            <li><i class="icon-caret-right"></i>Consectetur adipiscing elit</li>
	                                            <li><i class="icon-wrench"></i>Integer molestie lorem at massa</li>
	                                            <li><i class="icon-cog"></i>Facilisis in pretium nisl aliquet</li>
	                                            <li><i class="icon-pencil"></i>Nulla volutpat aliquam velit</li>
	                                        </ul>
	                                    </div>
	                                </div>
	                                <!-- /font-icons -->
	                                
	                                <!-- Check list -->
	                                <div class="semi-widget">
	                                	<strong class="subtitle">Check list</strong>
	                                    <div class="well-white body">
	                                        <ul class="check-list">
	                                            <li>Nulla volutpat aliquam velit
	                                                <ul>
	                                                    <li>Phasellus iaculis neque</li>
	                                                    <li>Purus sodales ultricies</li>
	                                                </ul>
	                                            </li>
	                                            <li>Faucibus porta lacus fringilla vel</li>
	                                        </ul>
	                                    </div>
	                                </div>
	                                <!-- /check list -->

	                            </div>
                                
                            </div>
                            <!-- /column -->
                            
                            <!-- Column -->
                            <div class="span3">

                            	<div class="widget">
                            
	                            	<!-- Glyph icons -->
	                                <div class="semi-widget">
	                                	<strong class="subtitle">Glyph icons</strong>
	                                    <div class="well-white body">
	                                        <ul class="">
	                                            <li><i class="icon-move"></i>Lorem ipsum dolor sit amet</li>
	                                            <li><i class="icon-th-large"></i>Consectetur adipiscing elit</li>
	                                            <li><i class="icon-pencil"></i>Integer molestie lorem at massa</li>
	                                            <li><i class="icon-shopping-cart"></i>Facilisis in pretium nisl aliquet</li>
	                                            <li><i class="icon-fullscreen"></i>Nulla volutpat aliquam velit</li>
	                                        </ul>
	                                    </div>
	                                </div>
	                                <!-- /glyph icons -->
	                                
	                                <!-- Plus list -->
	                                <div class="semi-widget">
	                                	<strong class="subtitle">Plus list</strong>
	                                    <div class="well-white body">
	                                        <ul class="plus-list">
	                                            <li>Nulla volutpat aliquam velit
	                                                <ul>
	                                                    <li>Phasellus iaculis neque</li>
	                                                    <li>Purus sodales ultricies</li>
	                                                </ul>
	                                            </li>
	                                            <li>Faucibus porta lacus fringilla vel</li>
	                                        </ul>
	                                    </div>
	                                </div>
	                                <!-- /plus list -->

	                            </div>
                                
                            </div>
                            <!-- /column -->
                            
                        </div>
                        <!-- /lists -->
                                                    
                        <!-- Description list -->
                        <div class="row-fluid">
                        
                        	<!-- Column -->
                        	<div class="span6">

                                <div class="semi-widget">
                                	<strong class="subtitle">Description list</strong>
                                    <div class="well-white body">
                                        <dl>
                                            <dt>Description lists</dt>
                                            <dd>A description list is perfect for defining terms.</dd>
                                            <dt>Euismod</dt>
                                            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                            <dt>Malesuada porta</dt>
                                            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <!-- /column -->
                            
                            <!-- Column -->
                            <div class="span6">

                                <div class="semi-widget">
                                	<strong class="subtitle">Horizontal description</strong>
                                    <div class="well-white body">
                                        <dl class="dl-horizontal">
                                            <dt>Description lists</dt>
                                            <dd>A description list is perfect for defining terms.</dd>
                                            <dt>Euismod</dt>
                                            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                            <dt>Malesuada porta</dt>
                                            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                                            <dt>Felis euismod semper eget lacinia</dt>
                                            <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
                                        </dl>
                                    </div>
                                </div>
                                
                            </div>
                            <!-- /column -->
                            
                        </div>
                        <!-- /description list -->

                    </div>	
                </div>
            	<!-- /list styles -->

            </div>
            <!-- / content wrapper -->

		</div>
		<!-- /content -->

	</div>
	<!-- /content container -->


	<!-- Footer -->
	<div id="footer">
		<div class="copyrights">&copy;  Brought to you by Eugene Kopyov.</div>
		<ul class="footer-links">
			<li><a href="#" title=""><i class="icon-cogs"></i>Contact admin</a></li>
			<li><a href="#" title=""><i class="icon-screenshot"></i>Report bug</a></li>
		</ul>
	</div>
	<!-- /footer -->

</body>
</html>
